<template>
    <div  class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="85px">
          <el-form-item label="日期类型：" prop="type">
          <el-radio-group
              v-model="radioTimeChange"
              @change="changeTab"
            >
              <el-radio  v-for="dict in dateTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" ></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item :label="timeLable" prop="type">
          <el-date-picker
             v-if="type=='1'"
             v-model="value1"
             value-format="yyyy-MM-dd"
             type="date"
             placeholder="选择日期">
           </el-date-picker>
           <el-date-picker
              v-if="type=='2'"
              v-model="value2"
              value-format="yyyy-MM"
              type="month"
              placeholder="选择月">
            </el-date-picker>
            <div  v-if="type=='3'">
              <el-date-picker
              style="margin-right: 20px;"
                 v-model="year"
                 type="year"
                 value-format="yyyy"
                 placeholder="选择年">
               </el-date-picker>
               <el-radio-group v-model="xqLb">
                 <el-radio :label="1">上</el-radio>
                 <el-radio :label="2">下</el-radio>
               </el-radio-group>
             </div>
        </el-form-item>
            <el-form-item label="园所性质" prop="type">
             <el-select v-model="queryParams.type" placeholder="请选择园所性质" clearable size="small">
               <el-option v-for="dict in schoolTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
             </el-select>
             </el-form-item>
             <el-form-item label="地区类型" prop="nature">
               <el-select v-model="queryParams.nature" placeholder="请选择地区类型" clearable size="small">
                 <el-option v-for="dict in schoolNatureOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
               </el-select>
             </el-form-item>
             <el-form-item>
                 <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                 <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
             </el-form-item>
      </el-form>
      <div class="echart">
        <div  ref="timeChart" class="timeChart"></div>
        <div  ref="rateChart" class="rateChart"></div>
      </div>
    </div>
</template>
<script>
import moment from "moment";
export default {
    name: "outdoors",
    data() {
      return {
        radioTimeChange: "日",
        type:'1',
        xqLb:1,
        startDate:'',
        endDate:'',
        timeLable:'日期：',
        value1:new Date(),
        value2:new Date(),
        year:new Date(),
          //学期
        semsterList: [],
         dateTypeOptions:[],
          queryParams:{
              type:'1',
              nature:'',
          },
          schoolTypeOptions:[],
          schoolNatureOptions:[],
          timeChart:null,
          rateChart:null,
          outdoorsTime:[
            {name:'园所1',value:200,},
            {name:'园所2',value:200,},
            {name:'园所3',value:200,},
          ],
          outdoorsRate:[
            {name:'园所1',value:98,},
            {name:'园所2',value:98,},
            {name:'园所3',value:98,},
          ],
      };
    },
    created() {
         this.getDicts("park_type").then(response => {
            this.schoolTypeOptions = response.data;
          });
         this.getDicts("school_nature").then(response => {
            this.schoolNatureOptions = response.data;
         });
         this.getDicts("date_type").then(response => {
        this.dateTypeOptions = response.data;
      });
    },
    mounted(){
          // this.getList()
          this.timeChart = this.$echarts.init(this.$refs.timeChart);
          this.rateChart = this.$echarts.init(this.$refs.rateChart);
          this.outdoorsTimeFn();
          this.outdoorsRateFn();
     },
    methods: {
      getList(){
      // console.log(1111);
      console.log(this.radioTimeChange);
      if(this.radioTimeChange=='日'){
        // console.log(this.radioTimeChange);
        this.getdayfood();
        this.getcategoryDay();
      }else if(this.radioTimeChange=='月'){
          this.getmonthFood();
          this.getcategoryMonth();
      }else if(this.radioTimeChange=='学期'){
          this.getSemsterfood();
          this.getcategorySemster()
      }
    },
    getTime(){
          if(this.xqLb=='1'){
              this.startDate=moment(this.year).format("YYYY")+'-09-01';
              this.endDate= moment(this.year).add(1, "year").format("YYYY")+'-01-31';
          }else{
              this.startDate=moment(this.year).add(1, "year").format("YYYY")+'-02-01';
              this.endDate= moment(this.year).add(1, "year").format("YYYY")+'-08-01';
          }
    },
     //图表日期选择
   changeTab(vId){
      // console.log("dd", this.radioTimeChange);
      // console.log('klkl',vId)
      let obj = {};
       obj = this.dateTypeOptions.find((item)=>{  //这里的radioPay就是上面遍历的数据源
           return item.dictLabel === vId;  //筛选出匹配数据，这里的value是你遍历数组每一项的value，如果没有对后台返回的数据做处理，一般为id
       });
      this.type = obj.dictValue  //打印出来的obj.value  就是想要的label值
      // console.log('mkmk',this.type);//  这里的addCagLabel就是对应label的
    if (vId == "学期") {
      this.type = 3;
      this.timeLable='学期：'
    } else if (vId == "月") {
      this.type = 2;
      this.timeLable='日期：'
    } else if(vId == "日") {
      this.type = 1;
      this.timeLable='日期：'
    }
  },
       // 园所性质字典翻译
       schoolTypeFormat(row, column) {
        return this.selectDictLabel(this.schoolTypeOptions, row.schoolType);
      },
      //地区类型字典翻译
      schoolNatureFormat(row, column) {
        return this.selectDictLabel(this.schoolNatureOptions, row.nature);
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.getmaterial();
        this.getmaterialCorner();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams= {
          type:'1',
          nature:'',
        },
        this.resetForm("queryForm");
        this.handleQuery();
      },
     //户外时长统计
     outdoorsTimeFn(){
        const option = {
         // backgroud:'#333',
         title: {
           text: '各园幼儿户外平均时长情况',
          //  subtext: '纯属虚构',
           left: 'left'
         },
         dataZoom:{
            bottom:0,
            show:8/this.outdoorsRate.length<1,
            // show:true,
            type:'slider',
            zoomLock:true,
            brushSelect:false,
            height:8,
            // backgroundColor:'#000000',
            handleSize:'0',
            // moveHandleSize:1,
            // moveHandleStyle:{
            //   borderType:'dotted'
            // },
            sow:true,
            xAxisIndex:[0],
            start:0,
            end:8/this.outdoorsRate.length*100
        },
         tooltip: {
              trigger: 'item',
            //   formatter: function (params) {
            //    return params.seriesName
            //  },
          },
          legend: {
            selectedMode: 'single',
            top:0,
              left:'right',
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: [
              {
              type: 'category',
              axisLabel: {//x轴文字的配置
               show: true,
               rotate:0,
               interval: 0,//使x轴文字显示全
              },
              data: this.outdoorsRate.map(item=>item.name)
              }
          ],
          yAxis: [
              {
              type: 'value'
              }
          ],
          color:['#5ab1ef','#2ec7c9',],
          series: [
              {
                  name: '',
                  type: 'bar',
                  // stack: 'Ad',
                  barWidth:'45',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.outdoorsRate
              },

          ]
          }
          this.timeChart.setOption(option);
          window.addEventListener("resize", this.monitorResize);
    },
     //户外活动达标率统计
     outdoorsRateFn(){
        const option = {
         // backgroud:'#333',
         title: {
           text: '各园幼儿户外达标率情况',
          //  subtext: '纯属虚构',
           left: 'left'
         },
         dataZoom:{
            bottom:0,
            show:8/this.outdoorsTime.length<1,
            // show:true,
            type:'slider',
            zoomLock:true,
            brushSelect:false,
            height:8,
            // backgroundColor:'#000000',
            handleSize:'0',
            // moveHandleSize:1,
            // moveHandleStyle:{
            //   borderType:'dotted'
            // },
            sow:true,
            xAxisIndex:[0],
            start:0,
            end:8/this.outdoorsTime.length*100
        },
         tooltip: {
              trigger: 'item',
            //   formatter: function (params) {
            //    return params.seriesName
            //  },
          },
          legend: {
            selectedMode: 'single',
            top:0,
              left:'right',
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: [
              {
              type: 'category',
              axisLabel: {//x轴文字的配置
               show: true,
               rotate:0,
               interval: 0,//使x轴文字显示全
              },
              data: this.outdoorsTime.map(item=>item.name)
              }
          ],
          yAxis: [
              {
              type: 'value'
              }
          ],
          color:['#5ab1ef','#2ec7c9',],
          series: [
              {
                  name: '',
                  type: 'bar',
                  // stack: 'Ad',
                  barWidth:'45',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.outdoorsTime
              },

          ]
          }
          this.rateChart.setOption(option);
          window.addEventListener("resize", this.monitorResize);
    },
       //地图监听窗口缩放事件
       monitorResize(){
         this.timeChart.resize();
         this.rateChart.resize();
        },

    }
  };
  </script>

  <style lang="scss" scoped>
     .echart{
         width: 100%;
         height: 600px;
        .timeChart{
            width: 100%;
            height: 50%;
        }
        .rateChart{
            margin-top: 50px;
            width: 100%;
            height: 50%;
        }
     }
</style>
